<extend name="Public/header"/>
<block name="main">
  <body class="f9">
     <div class="top">
        <div class="backdiv white hg40">
          <img src="__WEBPUBLIC__/Home/img/back1.png" class="backimg">
          <span>教练资料</span>
        </div> 
      </div>
      <div class="pd50">
          <div class="infomain">
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__hd">
                  <p>头像</p>
                </div>
                <div class="weui-cell__bd">
                  <input type="file" name="pic" style="opacity:0"/>
                </div>
                <div class="weui-cell__ft"><img src="{$teac['headpic']}" class="minhead" alt=""></div>
              </div>         
              <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>昵称</p>
                </div>
                <div class="weui-cell__ft padl30 blur" key="name" contenteditable="true">{$teac['name']}</div>
              </div>
              <div class="weui-cell weui-cell_access">
                <div class="weui-cell__bd">
                    <p>性别</p>
                </div>
                <div class="weui-cell__ft sex" sex="{$teac['sex']}">
                  <if condition="$teac['sex'] eq 2">
                    女
                    <else/>
                    男
                  </if>
                </div>
              </div>
              <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>年龄</p>
                </div>
                <div class="weui-cell__ft padl30 blur" key="age" contenteditable="true">{$teac['age']}</div>
              </div>
           </div>
      </div>
  </body>
  </block>
<block name="footerjs">
  <script>
  $(".blur").on('blur',function () {
    var val = $(this).text();
    var key = $(this).attr("key");
    if (val && key) {
      console.log(val,key);
      if (key=="age" && !/^\d{1,2}$/.test(val)) {
        layer.msg("请填写合法年龄！");
        return;
      }
      requestUrl("{:U('Teac/setpro')}",{key:key,val:val},function ( res ) {
        layer.msg(res.message);
      });
    }else{
      layer.msg("数据获取有误！");
    }

  });

  $(".sex").on('click',function () {
    
    var sex = $(this).attr("sex");
    sex = (sex == 1 ? 2 : 1);
    requestUrl("{:U('Teac/setpro')}",{key:"sex",val:sex},function ( res ) {
        layer.msg(res.message);
        if (res.flag == "success") {
          $(this).attr("sex",sex).text((sex == 1 ? "男" : "女"));
        }
    }.bind(this));
  });

  function ajax(){
      var filesize = this.files[0].size;
      if (filesize > 500*1024) {
          alert("请上传大小在500k以下的图片");
          return false;
      }
      var files = this.files;
      var picname = files[0].name;
      var reader = new FileReader();
      reader.onload = function(e){
          var src = e.target.result;
          render(src,picname);
      }
      reader.readAsDataURL(files[0]);
  }
  $("input[type='file']").on('change',ajax);

  function putdata(dataargs) {
    requestUrl("{:U('Teac/setpro')}", dataargs, function (res) {
        layer.closeAll();
        layer.msg(res.message);
        if (res.flag == "success") {
          $(".minhead").attr("src",res.data);
        }
    }, "POST", true);
  }
  var MAX_HEIGHT = 1000;
// 渲染
function render(src,picname) {
    // 创建一个 Image 对象
    var image = new Image();
    // 绑定 load 事件处理器，加载完成后执行
    image.onload = function() {
        // 获取 canvas DOM 对象
        var canvas = document.createElement("canvas");
        // 如果高度超标
        if (image.height > MAX_HEIGHT && image.height >= image.width) {
            // 宽度等比例缩放 *=
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        if (image.width > MAX_HEIGHT && image.width > image.height) {
            // 宽度等比例缩放 *=
            image.height *= MAX_HEIGHT / image.width;
            image.width = MAX_HEIGHT;
        }
        // 获取 canvas的 2d 环境对象,
        // 可以理解Context是管理员，canvas是房子
        var ctx = canvas.getContext("2d");
        // canvas清屏
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        // 重置canvas宽高
        canvas.width = image.width;
        canvas.height = image.height;
        // 将图像绘制到canvas上
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // !!! 注意，image 没有加入到 dom之中
//        document.getElementById('img').src = canvas.toDataURL("image/png");
        var blob = canvas.toDataURL("image/jpeg");
        var dataargs = {"pic": blob, "pic_name": picname};
        putdata(dataargs);
        //imgarr.push({"pic":blob,"pic_name":picname});
        // var fd = new FormData();
        // fd.append("image", blob, "image.png");
        // imgCompressUpload(canvas.toDataURL("image/png"));
       
    };
    // 设置src属性，浏览器会自动加载。
    // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
    image.src = src;
};
  </script>
</block>